<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>scroll</title>
	<link rel="stylesheet" href="style/normalize.css">
	<style>
		body {
			background-color: #ddd;
		}
		ul,div,h3 {
			padding: 0;
			margin: 0;
		}
		.scroll-demo {
			width: 540px;
			border: 1px solid #e5e5e5;
			background-color: #fff;
			margin: 80px auto;
		}
		.scroll-tab {
			height: 35px;
			border-bottom: 1px solid #e5e5e5;
			color: #666;
			background-color: #f8f8f8;
		}
		.tab-item {
			float: left;
			font: 14px/35px "Microsoft Yahei";
			height: 35px;
			text-align: center;
			border-left: 1px solid #e5e5e5;
			padding: 0 35px;
		}
		.clearfix:after {
			content: '';
			display: block;
			clear: both;
			height: 0;
			visibility: hidden;
		}
		.scroll-tab .tab-active {
			background-color: #fff;
			color: #00be3c;
			border-top: 2px solid #00be3c;
			margin: -1px 0;
		}

		.scroll-wrap {
			position: relative;
			width: 100%;
			height: 300px;
		}
		.scroll-cont {
			height: 100%;
			overflow: hidden;
			padding: 0 15px;
		}
		.scroll-cont h3 {
			font: 16px/3 'Microsoft Yahei';
			text-align: center;
		}
		.scroll-ol p {
			font-size: 14px;
			line-height: 22px;
			text-indent: 2em;
			margin-bottom: 10px;
		}
		.scroll-bar {
			position: absolute;
			top: 0;
			right: 0;
			height: 100%;
			width: 10px;
			background-color: #eaeaea;
		}
		.scroll-bar .scroll-slider {
			position: absolute;
			top: 0;
			left: 1px;
			height: 30px;
			width: 8px;
			background-color: #fff;
		}
	</style>

</head>
<body>
	<div class="scroll-demo">
		<ul class="scroll-tab clearfix">
			<li class="tab-item tab-active">第一篇</li>
			<li class="tab-item">第二篇</li>
			<li class="tab-item">第三篇</li>
			<li class="tab-item">第四篇</li>
		</ul>
		<div class="scroll-wrap">
			<div class="scroll-cont">
				<h3 class="anchor">第一篇</h3>
				<div class="scroll-ol">
					<p>
						近来，这个世界似乎有太多的轰动，从江苏的减招，到全国各地雨水的增多，再到近期南海的争夺，一件件，一桩桩，都闹出沸沸扬扬，轰轰烈烈的动作，我静静的听，慢慢的读，内心有诸多的感触在舞动，想落笔为墨，想与你一起细细的倾吐，相信，若你在，定会有更多的言论和话题来演说，想像着，你手舞足蹈，滔滔不绝的会把前因后果细细来解剖，想像着，你慷慨激昂爆发出爱国的歌，变化的神情，高扬的声调，不断散发着无穷的魅力与气魄。
					</p>
					<p>
						花开半夏，草木深种，繁花似锦，雨打芭蕉，无需怨，无需羡，一切，皆有规律与因果，与其纠结着该如何又如何，莫不如，且让一切随缘，一切随风，将所有的对与错，燃烧至淡泊，沏一杯清茶，备一壶美酒，只安心的守候，半亩花田里，结出一枚倾心的果，我在你眼里，你在我心里，如此便是这一世该有的温和。
					</p>
				</div>
				<h3 class="anchor">第二篇</h3>
				<div class="scroll-ol">
					<p>
						近来，这个世界似乎有太多的轰动，从江苏的减招，到全国各地雨水的增多，再到近期南海的争夺，一件件，一桩桩，都闹出沸沸扬扬，轰轰烈烈的动作，我静静的听，慢慢的读，内心有诸多的感触在舞动，想落笔为墨，想与你一起细细的倾吐，相信，若你在，定会有更多的言论和话题来演说，想像着，你手舞足蹈，滔滔不绝的会把前因后果细细来解剖，想像着，你慷慨激昂爆发出爱国的歌，变化的神情，高扬的声调，不断散发着无穷的魅力与气魄。
					</p>
					<p>
						花开半夏，草木深种，繁花似锦，雨打芭蕉，无需怨，无需羡，一切，皆有规律与因果，与其纠结着该如何又如何，莫不如，且让一切随缘，一切随风，将所有的对与错，燃烧至淡泊，沏一杯清茶，备一壶美酒，只安心的守候，半亩花田里，结出一枚倾心的果，我在你眼里，你在我心里，如此便是这一世该有的温和。
					</p>
				</div>
				<h3 class="anchor">第三篇</h3>
				<div class="scroll-ol">
					<p>
						近来，这个世界似乎有太多的轰动，从江苏的减招，到全国各地雨水的增多，再到近期南海的争夺，一件件，一桩桩，都闹出沸沸扬扬，轰轰烈烈的动作，我静静的听，慢慢的读，内心有诸多的感触在舞动，想落笔为墨，想与你一起细细的倾吐，相信，若你在，定会有更多的言论和话题来演说，想像着，你手舞足蹈，滔滔不绝的会把前因后果细细来解剖，想像着，你慷慨激昂爆发出爱国的歌，变化的神情，高扬的声调，不断散发着无穷的魅力与气魄。
					</p>
					<p>
						花开半夏，草木深种，繁花似锦，雨打芭蕉，无需怨，无需羡，一切，皆有规律与因果，与其纠结着该如何又如何，莫不如，且让一切随缘，一切随风，将所有的对与错，燃烧至淡泊，沏一杯清茶，备一壶美酒，只安心的守候，半亩花田里，结出一枚倾心的果，我在你眼里，你在我心里，如此便是这一世该有的温和。
					</p>
				</div>
				<h3 class="anchor">第四篇</h3>
				<div class="scroll-ol">
					<p>
						花开半夏，草木深种，繁花似锦，雨打芭蕉，无需怨，无需羡，一切，皆有规律与因果，与其纠结着该如何又如何，莫不如，且让一切随缘，一切随风，将所有的对与错，燃烧至淡泊，沏一杯清茶，备一壶美酒，只安心的守候，半亩花田里，结出一枚倾心的果，我在你眼里，你在我心里，如此便是这一世该有的温和。
					</p>
				</div>
				<div class="correct-bot"></div>
			</div>
			<div class="scroll-bar">
				<div class="scroll-slider"></div>
			</div>
		</div>
	</div>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/definedScroll.js"></script>
<script defer>
	$().ready(function() {
		// 实例化
		var scroll1 = new cusScrollBar({
			contSelector: ".scroll-cont",
			barSelector: ".scroll-bar",
			sliderSelector: ".scroll-slider",
			tabItemSelector: ".tab-item",
			tabActiveClass: "tab-active",
			anchorSelector: ".anchor",
			correctSelector: ".correct-bot", 
			articleSelector: ".scroll-ol"
		});
	})


</script>
</html>